<template>
  <div class="content">
    <div class="rowleft">
      <div class="top-header">
        <div class="title">
          <p>套餐基础信息设置</p>
        </div>
      </div>

      <div class="form-top">
        <el-form :model="form" :rules="rules" ref="formRef" label-position="top">
          <el-form-item label="套餐名称" prop="bundleName">
            <el-input v-model="form.bundleName" placeholder="请输入：如“特惠沙发系列”（20字以内）" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="套餐封面" prop="fengmian">
            <div class="upload-img-wrap">
              <el-upload
                v-if="picturedata.acceptanceCriteria.picUrlList.length == 0"
                class="avatar-uploader"
                ref="uploadImg"
                v-model:file-list="imgFileList"
                :show-file-list="false"
                multiple
                :limit="100"
                list-type="picture-card"
                :auto-upload="false"
                :on-change="
                  (file, fileList) => {
                    handleAvatarChangeIcon(file, fileList);
                  }
                "
                :on-preview="
                  file => {
                    reviewFile(file);
                  }
                "
              >
                <template #trigger>
                  <div class="upload-picture-card">
                    <el-icon><Plus /></el-icon>
                    <span class="upload__tip">点击上传</span>
                  </div>
                </template>
                <template #tip>
                  <p class="f12 mt10" style="color: #86909c">注：图片尺寸900*600px，大小不超过1MB，只支持1张</p>
                </template>
              </el-upload>
              <div class="imgs">
                <div
                  class="standard_diagram_item"
                  v-for="(item, index) in picturedata.acceptanceCriteria.picUrlList"
                  :key="index"
                >
                  <span class="close_icon">
                    <!-- <el-icon size="20" @click="handelClickDeletPicter(item, index)"><CircleCloseFilled /></el-icon> -->
                    <img class="close_icon_image" src="@/assets/images/delred.png" @click="handelClickDeletPicter(item, index)" />
                  </span>
                  <img :src="item" />
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="活动时间" prop="time" class="datatype_activity_time">
            <div class="activity_time_item">
              <div class="activity_timeitem_father">
                <el-radio-group v-model="form.activityDateType">
                  <el-radio value="0" size="large">长期有效</el-radio>
                  <el-radio value="1" size="large">自定义时间</el-radio>
                </el-radio-group>
              </div>

              <div v-if="form.activityDateType == 1" class="formtime">
                <div class="formtime_item">
                  <el-date-picker
                    v-model="form.time"
                    type="datetimerange"
                    format="YYYY-MM-DD HH:ss:mm"
                    value-format="YYYY-MM-DD HH:ss:mm"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :default-value="[new Date(2024, 9, 1), new Date(2025, 10, 1)]"
                    popper-class="custom-right-popper"
                  />
                  <el-checkbox
                    v-model="timeradio"
                    label="隐藏活动时间"
                    size="large"
                    @change="handleIsShowActivityDate"
                    class="custom-checkbox"
                  />
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="套餐风格" prop="bundleStyle">
            <el-select v-model="form.bundleStyle">
              <el-option
                v-for="item in paramsOption.shop_product_style"
                :key="item.dictValue"
                :value="item.dictValue"
                :label="item.dictLabel"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关联预算报价模板" prop="oneprice" class="guanliyusuan">
            <div class="guanlian" @click="drawervalue = true" v-if="!form.combineId" style="border: 1px solid #007dff">
              <div class="text">+&nbsp;&nbsp;&nbsp;&nbsp;关联预算模版</div>
            </div>
            <div class="closeguanlian">
              <div class="guanlian" @click="drawervalue = true" v-if="form.combineId" style="border: 1px solid #e1e6ed">
                <div>{{ selectdrawer.budgetName }}</div>
              </div>
              <img class="close-button" src="@/assets/images/delred.png" v-if="form.combineId" @click="closeiocn" />
            </div>
          </el-form-item>
          <el-form-item label="套餐一口价" class="taocanykj">
            <el-input v-model="form.oneprice" disabled>
              <template #prepend v-if="!form.oneprice"> -- </template>
              <template #append> ￥ </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="rowright">
      <div class="top-header">
        <div class="title">
          <p>套餐报价明细</p>
        </div>
      </div>
      <div v-if="!form.combineId" class="fatherpicture">
        <div class="picture">
          <img src="@/assets/images/taocan.png" />
        </div>
      </div>
      <div class="right-top">
        <div class="onetitle">
          <el-tabs type="card" v-model="tabvmodel" @tab-change="tabchange">
            <el-tab-pane v-for="item in tabclickdata" :key="item.spaceId" :label="item.spaceName" :name="item.spaceId">
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="rightdomn" v-if="form.combineId">
        <div class="tabletitleone">商品添加</div>
        <div class="rowtable">
          <el-table
            :data="tableData"
            border
            style="width: 100%; margin-bottom: 20px; margin-top: 10px"
            height="500"
            :span-method="objectSpanMethod"
          >
            <!-- 自定义表头 -->
            <el-table-column align="center" label="index" width="150">
              <template #header>
                <div>套餐条件</div>
              </template>
              <template #default="{ row }">
                <div class="tabindex">
                  <div>{{ row.rowCount }}款{{ row.rowCount == 1 ? "" : "选" }}{{ row.rxNum }}</div>
                  <div>(固定商品)</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="index" label="序号" align="center"> </el-table-column>
            <el-table-column label="图片" width="148" align="center">
              <template #default="scope">
                <div class="tableitem">
                  <img :src="scope.row.mainPicUrl" class="custom-img" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" align="center"> </el-table-column>
            <el-table-column prop="categoryTree" label="商品分类" width="200" align="center">
              <template #default="{ row }">
                {{ row.categoryTree.join("-") }}
              </template>
            </el-table-column>
            <el-table-column prop="bandName" label="品牌" align="center"> </el-table-column>
            <el-table-column prop="amount3" label="型号" align="center"> </el-table-column>
            <el-table-column prop="productNum" label="商品数量" align="center"> </el-table-column>
            <el-table-column prop="realPrice" label="销售正价" align="center"> </el-table-column>
            <el-table-column prop="fixedPrice" label="一口价" align="center"> </el-table-column>
            <el-table-column prop="faPrice" label="工厂特价" align="center"> </el-table-column>
          </el-table>
        </div>
        <div class="tabletitle">组合条件添加</div>

        <div class="rowtable">
          <el-table
            :data="flattenedData"
            :span-method="tableSpanMethod"
            border
            style="width: 100%; margin-top: 20px"
            height="500"
          >
            <!-- 自定义表头 -->
            <el-table-column align="center" label="index" width="150">
              <template #header>
                <div>套餐条件</div>
              </template>
              <template #default="scope">
                <div class="tabindex">
                  <div>{{ scope.row.skuCount }}款选{{ scope.row.limitProductNumtotle }}</div>
                  <div>(组合条件共{{ scope.row.skuCount }}款)</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="套餐序号" align="center">
              <template #default="scope">
                {{ flattenedData.findIndex(item => item == scope.row) + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="商品分类" align="center" width="200px" />
            <el-table-column label="价格范围" align="center">
              <template #default="scope"> ${{ scope.row.quotePriceMin }}-${{ scope.row.quotePriceMax }} </template>
            </el-table-column>
            <el-table-column prop="limitProductNum" label="主材数量" align="center" />
            <el-table-column label="限制金额" align="center">
              <template #default="scope"> ${{ scope.row.limitProductMoney }} </template>
            </el-table-column>
            <el-table-column label="通用筛选" align="center">
              <template #default="scope">
                <div class="fatherround">
                  <div v-if="scope.row.productProList.filter(item => item.isCommon == 1).length > 0">
                    <span class="rowtable_tag">
                      {{ scope.row.productProList.filter(item => item.isCommon == 1)[0]?.stastsName }}
                    </span>
                  </div>

                  <div v-if="scope.row.productProList.filter(item => item.isCommon == 1).length > 1">
                    <span class="rowtable_tag">
                      {{ scope.row.productProList.filter(item => item.isCommon == 1)[1]?.stastsName }}
                    </span>
                  </div>

                  <el-tooltip effect="light">
                    <template #content>
                      <div class="childrenround">
                        <span
                          class="rowtable_tag"
                          v-for="(item, index) in scope.row.productProList.filter(item => item.isCommon == 1)"
                          :key="index"
                        >
                          {{ item?.stastsName || "--" }}
                        </span>
                      </div>
                    </template>
                    ...
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="属性筛选" align="center">
              <template #default="scope">
                <div class="fatherround">
                  <div v-if="scope.row.productProList.filter(item => item.isCommon == 0).length > 0">
                    <span class="rowtable_tag">
                      {{ scope.row.productProList.filter(item => item.isCommon == 0)[0]?.stastsName }}
                    </span>
                  </div>

                  <div v-if="scope.row.productProList.filter(item => item.isCommon == 0).length > 1">
                    <span class="rowtable_tag">
                      {{ scope.row.productProList.filter(item => item.isCommon == 0)[1]?.stastsName }}
                    </span>
                  </div>

                  <el-tooltip effect="light">
                    <template #content>
                      <div class="childrenround">
                        <span
                          class="rowtable_tag"
                          v-for="(item, index) in scope.row.productProList.filter(item => item.isCommon == 0)"
                          :key="index"
                        >
                          {{ item?.stastsName || "--" }}
                        </span>
                      </div>
                    </template>
                    ...
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="dowm">
      <div class="dowmchildren">
        <el-button @click="handleReset">返回</el-button>
        <el-button type="primary" @click="handleSubmit" v-if="showbutton">确认添加</el-button>
        <el-button type="primary" @click="editSubmit" v-if="!showbutton">确认编辑</el-button>
      </div>
    </div>
    <div class="drawer_width">
      <el-drawer v-model="drawervalue" :direction="direction" size="50%">
        <template #header>
          <div class="drawerheader">
            <div class="drawertitle">
              <p>选择并关联套餐预算模板</p>
            </div>
          </div>
        </template>
        <template #default>
          <el-input
            v-model="templateName"
            clearable
            style="width: 100%"
            placeholder="请输入模板名称"
            :prefix-icon="Search"
            @keyup.enter="getdrawerlist"
          />
          <div class="drawer_list">
            <div
              class="drawer_item"
              v-for="item in drawerlist"
              :key="item.templateId"
              @click="selectTemplate(item)"
              :style="item.showcolor == true ? 'background: #ffffff' : 'background: #F1F4F6;'"
            >
              <div class="item_head">
                <div class="text">{{ item.budgetName }}预算模板</div>
                ( 包含空间{{ item.spaceList.length + 1 }}个)
              </div>
              <div class="item_content">
                <div class="item_chirden" v-for="itemchirden in item.spaceList" :key="itemchirden.spaceId">
                  <div class="text">{{ itemchirden.spaceName }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <div style="flex: auto">
            <el-button @click="cancledrawer">取消</el-button>
            <el-button type="primary" @click="suredrawer">确认关联</el-button>
          </div>
        </template>
      </el-drawer>
    </div>
  </div>
</template>

<script setup>
import {
  _debounce, //防抖，多次频繁触发时，只执行最后一次
  getFolder
} from "@/utils/index";
import { imgsUpload } from "@/apis/products/specifications";
import { Search } from "@element-plus/icons-vue";
import useMultipartOssStore from "@/store/modules/multipartOssStore.js";
const ossStore = useMultipartOssStore();

const imgFileList = ref([]);
const uploadImg = ref();
const FileList = ref([]);
const picturedata = reactive({
  acceptanceCriteria: { videoUrlList: [], picUrlList: [] }
});

const fileReadRole = {
  defaultRole: "",
  privateRole: "private",
  publicRead: "public-read",
  publicReadWrite: "public-read-write"
};

const handleAvatarChangeIcon = _debounce(async (file, fileList, type = "img") => {
  //选中文件触发的change事件
  console.log("触发文件上传==", fileList);
  let _fileList = fileList.filter(item => item.status === "ready"); //未上传成功的图片
  const flag = await fileType(type, type === "img" ? _fileList : [file]);
  if (!flag) {
    const errorFile = [];
    const successFile = [];
    ElMessage({
      message: "只能上传jpeg，jpg，png图片文件，大小不超过5M",
      type: "error",
      offset: 60
    });
    for (let item of _fileList) {
      if (!(item.raw.type === "image/jpeg" || item.raw.type === "image/png") || item.raw.size > 1024 * 1024 * 5) {
        errorFile.push(item);
      } else {
        successFile.push(item);
      }
    }
    for (let item of errorFile) {
      uploadImg.value.handleRemove(item);
    }

    if (successFile.length <= 0) return;
  }
  FileList.value = fileList;
  for (let item of _fileList) {
    await customUpload(item, { file: item }, type);
  }
}, 100);
/**
 * 校验文件类型
 */
const fileType = async (type, fileList) => {
  let flag = true;
  for (let item of fileList) {
    if (!((item.raw.type === "image/jpeg" || item.raw.type === "image/png") && item.raw.size <= 1024 * 1024 * 5)) {
      flag = false;
    }
    if (!(item.raw.type === "image/jpeg" || item.raw.type === "image/png")) {
      flag = false;
    }
  }
  return flag;
};
/**
 * 上传
 */
const getFileName = name => {
  const arr = name.split(".");
  const _arr = JSON.parse(JSON.stringify(arr));
  let _name = "";
  let _suffix = "";
  if (arr.length > 2) {
    _arr.splice(_arr.length - 1, 1);
    _name = _arr.join(".");
    _suffix = arr[arr.length - 1];
  } else {
    _name = arr[0];
    _suffix = arr[1];
  }
  const folder = getFolder();
  return folder + _name + new Date().getTime() + "." + _suffix;
};

const customUpload = async (item, option, type) => {
  // 合并已上传和当前上传文件
  const objName = getFileName(option.file.name);
  await ossStore
    .submit(objName, option.file.raw)
    .then(async res => {
      await ossStore.setACL(objName, fileReadRole.publicRead);
      res.fileUrl = await ossStore.signatureUrl(objName);
      console.log("文件上传成功，地址为===", res.fileUrl.split("?")[0]);
      item["img"] = res.fileUrl.split("?")[0];
      picturedata.acceptanceCriteria.picUrlList.push(res.fileUrl.split("?")[0]);
      item["folder"] = objName;
      const Option = JSON.parse(JSON.stringify(option));
      uploadIMG(Option); //图片上传到业务端
    })
    .catch(err => {
      alert(JSON.stringify(err));
    });
};
//将图片上传到业务端服务
const uploadIMG = option => {
  const nameArr = option.file.name.split(".");
  const uploadArr = [
    {
      fileId: option.file.uid,
      objectName: option.file.folder, //目录＋文件名称
      url: option.file.img || option.file.video,
      access: "public-read",
      fileName: option.file.name, //文件名称
      bucketName: "51-jzt-dev",
      size: option.file.size,
      type: true,
      suffix: nameArr[nameArr.length - 1]
    }
  ];
  imgsUpload(uploadArr).then(res => {
    console.log(909090, res);
  });
};
const handelClickDeletPicter = (item, index) => {
  picturedata.acceptanceCriteria.picUrlList.splice(index, 1);
  imgFileList.value = [];
};

import { ElMessage } from "element-plus";
import {
  getBudgetQuotationList,
  getSpaceList,
  detailsProductList,
  detailsConditionList,
  createPackCombine,
  updatePackageCombine,
  getActivityTemplateList
} from "@/apis/budgetQuotation";
import { selectDictDataByType } from "@/apis/dict/dict";
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, computed, watch } from "vue";
import { reactive } from "vue";

const form = ref({
  isShowActivityDate: "0",
  time: [],
  activityDateType: ""
});
const useRout = useRouter();
const route = useRoute();
const customData = reactive({});
const paramsOption = ref({});
const conditiondata = reactive([]);
const tableData = ref([]);
const showbutton = ref(true);
const drawervalue = ref(false);
const searchdrawer = ref("");

// 自定义验证函数
function validateCoverImage(rule, value, callback) {
  if (picturedata.acceptanceCriteria.picUrlList.length === 0) {
    callback(new Error("请上传至少一张套餐封面"));
  } else {
    callback();
  }
}
// 自定义校验函数
function validateTime(rule, value, callback) {
  if (form.value.activityDateType == "1" && !form.value.time) {
    callback(new Error("请选择活动时间"));
  } else {
    callback();
  }
}

const rules = {
  bundleName: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
  fengmian: [{ required: true, validator: validateCoverImage, trigger: "change" }],
  time: [{ required: true, validator: validateTime, trigger: "change" }],
  bundleStyle: [{ required: true, message: "请选择套餐风格", trigger: "blur" }],
  oneprice: [{ required: true, message: "请选择关联预算报价模板", trigger: "blur" }]
};

const flattenedData = ref([]);
const formRef = ref(null);
// const tabPosition = ref(0);
const tabvmodel = ref(null);
const combineIdoptions = ref([]); // 下拉选项的数组
const tabclickdata = ref([]);
const timeradio = ref(false);
const templateName = ref("");
const drawerlist = ref([]);
const selectdrawer = ref({});
onMounted(() => {
  //获取模板列表
  getList();
  getdrawerlist();
  const dictArr = ["shop_product_style"];
  dictArr.forEach(item => {
    getDict(item);
  });
  if (route.query.data) {
    try {
      showbutton.value = false;
      Object.assign(customData, JSON.parse(route.query.data));
      resetform();
    } catch (e) {
      console.error("Failed to parse query data:", e);
    }
  }
});

const getdrawerlist = () => {
  getActivityTemplateList(templateName.value).then(res => {
    if (res.code == 200) {
      drawerlist.value = res.data.map(item => {
        return {
          ...item,
          showcolor: true
        };
      });
      const index = drawerlist.value.findIndex(i => i.templateId == customData.budgetTemplateId);
      if (index !== -1) {
        drawerlist.value[index].showcolor = false;
        selectdrawer.value = {
          ...drawerlist.value[index],
          showcolor: false
        };
      }
    }
  });
};
/**
 * 获取列表选项字典
 * @param {*} dictType 字典类型
 */
const getDict = async dictType => {
  const res = await selectDictDataByType(dictType);
  paramsOption.value[dictType] = res.data;
};

const handleSubmit = () => {
  formRef.value.validate(valid => {
    if (valid) {
      // 提交表单逻辑
      surehandleSubmit();
    } else {
      return false;
    }
  });
};
//初始化编辑信息
const resetform = () => {
  form.value = {
    bundleName: customData.bundleName,
    isShowActivityDate: customData.isShowActivityDate,
    activityBeginDate: customData.activityBeginDate,
    activityEndDate: customData.activityEndDate,
    bundleStyle: String(customData.bundleStyle),
    combineId: String(customData.budgetTemplateId),
    oneprice: customData.fixedPrice,
    activityDateType: String(customData.activityDateType),
    time: [customData.activityBeginDate, customData.activityEndDate]
  };
  customData.isShowActivityDate == 1 ? (timeradio.value = true) : (timeradio.value = false);
  picturedata.acceptanceCriteria.picUrlList.push(customData.coverImgUrl);
  //   imgFileList.value.push(customData.coverImgUrl)
  // console.log( imgFileList.value);

  getSpaceArrList(form.value.combineId);
};
//选择空间
const tabchange = e => {
  getProductList(form.value.combineId, e);
  getcondtiontabledata(form.value.combineId, tabvmodel.value);
};
//选择预算模板
const changecombineId = e => {
  if (e === "") {
    form.value.oneprice = null;
    return;
  }
  getSpaceArrList(e);
  form.value.oneprice = combineIdoptions.value.find(item => item.templateId == e).packageTotalPrice;
};
const selectTemplate = item => {
  drawerlist.value.forEach(v => {
    v.showcolor = true;
  });
  item.showcolor = !item.showcolor;
  selectdrawer.value = item;
};
const cancledrawer = () => {
  drawervalue.value = false;
};
const suredrawer = () => {
  form.value.combineId = selectdrawer.value.templateId;
  changecombineId(form.value.combineId);
  drawervalue.value = false;
};
const closeiocn = () => {
  form.value.combineId = "";
  changecombineId(form.value.combineId);
  drawerlist.value.forEach(item => (item.showcolor = true));
  selectdrawer.value = {};
};
// 获取模板列表
const getList = async () => {
  await getBudgetQuotationList()
    .then(res => {
      combineIdoptions.value = res.data.setMealList.filter(item => item.templateState);
    })
    .catch(err => {
      console.log(err);
    });
};
//获取空间列表
const getSpaceArrList = e => {
  getSpaceList(e).then(res => {
    if (res.code == 200) {
      tabclickdata.value = res.data;
      if (tabclickdata.value.length !== 0) {
        tabvmodel.value = tabclickdata.value[0].spaceId;
        getProductList(form.value.combineId, tabvmodel.value);
        getcondtiontabledata(form.value.combineId, tabvmodel.value);
      }
    }
  });
};
//获取条件表格数据
const getcondtiontabledata = (templateId, spaceId) => {
  detailsConditionList(templateId, spaceId).then(res => {
    conditiondata.value = res.data;
    flattenedData.value = conditiondata.value.flatMap((item, ids) =>
      item.voList.map(chirditem => ({
        limitProductNumtotle: item.limitProductNum,
        skuCount: item.skuCount,
        index: ids,
        ...chirditem
      }))
    );
  });
};
//获取商品表格数据
const getProductList = async (templateId, spaceId) => {
  const res = await detailsProductList(templateId, spaceId);
  tableData.value = res.data.map((item, index) => {
    return {
      ...item,
      index: index + 1
    };
  });
};
//合并单元格
const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    const currentName = flattenedData.value[rowIndex].index;
    if (rowIndex === 0 || currentName !== flattenedData.value[rowIndex - 1].index) {
      let rowCount = 0;
      for (let i = rowIndex; i < flattenedData.value.length; i++) {
        if (flattenedData.value[i].index === currentName) {
          rowCount++;
        } else {
          break;
        }
      }
      return [rowCount, 1];
    } else {
      return [0, 0];
    }
  }
  return [1, 1];
};
// 合并单元格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    const currentName = tableData.value[rowIndex].quotaId;
    if (rowIndex === 0 || currentName !== tableData.value[rowIndex - 1].quotaId) {
      let rowCount = 0;
      for (let i = rowIndex; i < tableData.value.length; i++) {
        if (tableData.value[i].quotaId === currentName) {
          rowCount++;
        } else {
          break;
        }
      }
      // 更新 rowCount 属性
      for (let i = rowIndex; i < rowIndex + rowCount; i++) {
        tableData.value[i].rowCount = rowCount;
      }
      return [rowCount, 1];
    } else {
      return [0, 0];
    }
  }
  return [1, 1];
};
const submitForm = () => {
  formRef.value.validate(valid => {
    if (valid) {
      alert("提交成功!");
    } else {
      console.error("表单验证失败!");
      return false;
    }
  });
};
const handleReset = () => {
  routecancle();
  picturedata.acceptanceCriteria.picUrlList = [];
  form.value = ref({});
};

const routecancle = () => {
  useRout.push({
    path: "budget-package"
  });
};
//获取当前时间
const getCurrentFormattedTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
const surehandleSubmit = () => {
  if (form.value.activityDateType == 0) {
    form.value.time[0] = getCurrentFormattedTime();
    form.value.time[1] = "2099-12-30 23:59:59";
  }
  const data = ref({
    bundleName: form.value.bundleName,
    coverImgUrl: picturedata.acceptanceCriteria.picUrlList[0],
    activityBeginDate: form.value.time[0],
    activityEndDate: form.value.time[1],
    isShowActivityDate: form.value.isShowActivityDate,
    bundleStyle: form.value.bundleStyle,
    budgetTemplateId: form.value.combineId,
    activityDateType: form.value.activityDateType
  });
  createform(data.value);
};
const createform = data => {
  createPackCombine(data).then(res => {
    if (res.code == 200) {
      ElMessage.success(res.msg);
      routecancle();
      form.value = ref({});
      picturedata.acceptanceCriteria.picUrlList = [];
    }
  });
};
const editSubmit = () => {
  if (form.value.activityDateType == 0) {
    form.value.time[0] = getCurrentFormattedTime();
    form.value.time[1] = "2099-12-30 23:59:59";
  }
  const data = ref({
    combineId: customData.combineId,
    bundleName: form.value.bundleName,
    coverImgUrl: picturedata.acceptanceCriteria.picUrlList[0],
    activityBeginDate: form.value.time[0],
    activityEndDate: form.value.time[1],
    isShowActivityDate: form.value.isShowActivityDate,
    bundleStyle: form.value.bundleStyle,
    budgetTemplateId: form.value.combineId,
    activityDateType: form.value.activityDateType
  });
  updaform(data.value);
};
const updaform = data => {
  updatePackageCombine(data).then(res => {
    if (res.code == 200) {
      ElMessage.success(res.msg);
      routecancle();
    }
  });
};
const handleIsShowActivityDate = () => {
  if (timeradio.value == true) {
    form.value.isShowActivityDate = "1";
  } else {
    form.value.isShowActivityDate = "0";
  }
};
//重置表单数据
const resetForm = () => {
  formRef.value.resetFields();
};
</script>

<style>
.custom-checkbox .el-checkbox__input {
  border-radius: 50%; /* 将边框和背景设置为圆形 */
}

.custom-checkbox .el-checkbox__inner {
  border-radius: 50%; /* 圆形边框 */
  width: 20px; /* 可用于调整大小 */
  height: 20px;
}

.custom-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #007bff; /* 自定义选中时的颜色 */
  border-color: #007bff; /* 自定义选中时的边框颜色 */
}

/* 调整选中后的对勾或点为居中 */
.custom-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::before {
  background-color: #fff; /* 选中标记的颜色 */
  border-radius: 50%;
}
.datatype_activity_time .el-radio-group {
  margin-left: 30px;
}
.upload-img-wrap .el-upload--picture-card {
  width: 84px;
  height: 84px;
}
.drawer_width .el-drawer__header {
  border-bottom: 2px solid #dcdfe6; /* 添加下边框 */
  margin-bottom: 0 !important;
}
.taocanykj .el-input-group__append {
  background: #ffffff;
}
.taocanykj .el-input-group__prepend {
  background: #ffffff;
}
.custom-right-popper {
  transform: translateX(20%) !important; /* 在输入框右侧 */
  left: auto !important; /* 防止被其他位置覆盖 */
}
.fatherround {
  display: flex; /* 将 `.fatherround` 设置为 Flexbox 容器 */
  flex-direction: column; /* 将主轴方向设置为纵向，使子元素竖着排列 */
  justify-content: center; /* 垂直居中子元素 */
  align-items: center; /* 水平居中子元素 */
  width: 100%; /* 容器宽度为 100% */
}
.childrenround {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  max-width: 400px;
}
.roundflex {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-direction: column; /* 竖着排列 */
}
.roundflexitem {
  margin: 5px 0; /* 上下各有 10px 的边距 */
}
.tabindex {
  width: 129px;
  height: 44px;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #3d3d3d;
  line-height: 22px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.rightdomn {
  box-sizing: border-box;
  height: calc(100% - 140px);
  padding: 20px;
  overflow: auto;
}
.tabletitleone {
  width: 100%;
  height: 26px;
  font-family:
    Source Han Sans,
    Source Han Sans;
  font-weight: 500;
  font-size: 18px;
  color: #86909c;
  line-height: 26px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.tabletitle {
  width: 100%;
  height: 26px;
  font-family:
    Source Han Sans,
    Source Han Sans;
  font-weight: 500;
  font-size: 18px;
  color: #86909c;
  line-height: 26px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-top: 20px;
  margin-bottom: -8px;
}
.rowtable {
  height: 500px;
  width: 100%;
}
.rowtable_tag {
  display: inline-block;
  padding: 5px 16px;
  border: 1px dashed #e1e6ed;
  border-radius: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
}
.rowtable .el-table th {
  border: 0px solid #e1e6ed;
  background-color: #f2f6fc !important;
  border-bottom: 1px solid #e1e6ed !important;
  color: #4e5969;
  font-weight: 400;
}
</style>

<style lang="scss" scoped>
$picture-card-size: 84px;
.upload-picture-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .upload__tip {
    width: 48px;
    height: 22px;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #c9cdd4;
    line-height: 22px;
    text-align: right;
    font-style: normal;
    text-transform: none;
  }
}
.activity_time_item {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 0px 0px 2px 2px;
  border: 1px solid #dcdfe6;
  .activity_timeitem_father {
    margin: 10px 10px 12px 10px;
    background: #f5f7fa;
    border-radius: 0px 0px 2px 2px;
    border: 1px solid #dcdfe6;
  }
}
.drawer_list {
  .drawer_item {
    border: 1px solid #e1e6ed;
    margin-top: 20px; /* 上外边距 */
    margin-bottom: 20px; /* 下外边距 */
    position: relative; /* 为绝对定位的子元素提供基准 */
    cursor: pointer; /* 设置鼠标悬停时的光标样式 */
    min-height: 100px;
    border-radius: 8px 8px 8px 8px;
    .text {
      height: 24px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #3d3d3d;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .item_content {
      display: flex;
      flex-wrap: wrap;
      padding-left: 20px;
      .item_chirden {
        margin: 13px 5px; /* 上下 13px，左右 20px */
        min-width: 66px;
        height: 32px;
        background: #e1e6ed;
        border-radius: 4px 4px 4px 4px;
        display: flex; /* 启用 Flexbox */
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        .text {
          margin: 0 20px; /* 上下 0px，左右 20px */
        }
      }
    }

    .item_head {
      padding-left: 20px;
      padding-right: 63px;
      height: 44px;
      border: 1px solid #e1e6ed;
      display: flex;
      align-items: center; /* 垂直居中（可选） */
    }
  }
}
.formtime .formtime_item {
  margin: 10px 10px 12px 10px;
  display: flex;
  align-items: center;
}
.formtime :deep .el-range-editor.el-input__wrapper {
  width: 280px;
  height: 30px;
  background: #f2f3f5;
  border-radius: 2px 2px 2px 2px;
  margin-right: 15px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.guanliyusuan :deep .el-select__placeholder {
  width: 100%;
  background: #ffffff;
  border-radius: 2px 2px 2px 2px;
  //   border: 1px solid #007dff;
  display: flex; /* 启用 Flexbox */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #007dff;
  line-height: 22px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.guanliyusuan :deep(.el-select__wrapper) {
  background-color: white !important;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #e1e6ed;
}
.custom-img {
  width: 80px; /* 自定义宽度 */
  height: 80px; /* 自定义高度 */
  object-fit: cover; /* 保持比例并裁切多余部分 */
}
.right-top {
  display: flex;
  box-sizing: border-box;
  justify-content: space-between; /* 将两部分分布到左右 */
  align-items: center; /* 垂直居中对齐 */
  width: calc(100% - 40px); /* 占满父容器宽度 */
  margin: 0 20px;
  overflow: auto;
}
.right-top::-webkit-scrollbar {
  display: none; /* 隐藏 Webkit 浏览器（如 Chrome、Safari）的滚动条 */
}
.onetitle {
  flex-grow: 1; /* 可以根据实际需要调整生长因子 */
  :deep(.el-tabs__header) {
    margin-bottom: 0 !important;
  }
  :deep(.el-tabs__item.is-active) {
    background: #f2f6fc;
    box-shadow:
      inset 0px 1px 0px 0px #e4e7ed,
      inset -1px 0px 0px 0px #e4e7ed,
      inset 1px 0px 0px 0px #e4e7ed;
    border-radius: 2px 2px 0px 0px;
  }
  :deep(.el-tabs__header .el-tabs__item) {
    margin-right: 3px;
    border-top: 1px solid #e4e7ed;
    border-right: 1px solid #e4e7ed;
  }
  :deep(.el-tabs__header .el-tabs__nav) {
    // border-left: 1px solid #E4E7ED
  }
  :deep(.el-tabs__header .el-tabs__nav) {
    border: none !important;
  }
  :deep(.el-tabs__header .el-tabs__item:first-child) {
    border-left: 1px solid #e4e7ed;
  }
  /* 可选：去掉最后一个标签的右间距 */
  .el-tabs__header .el-tabs__item:last-child {
    margin-right: 0;
  }
}

// .twotitle {
//   position: relative;
//   top: 0;
// }
.closeguanlian {
  position: relative; /* 确保绝对定位相对于这个容器 */
  width: 100%;
  .close-button {
    position: absolute;
    top: -6px;
    right: -10px;
    cursor: pointer;
    width: 12px;
    height: 12px;
  }
}

.guanlian {
  position: relative; /* 确保绝对定位相对于这个容器 */
  cursor: pointer;
  width: 100%;
  height: 30px;
  background: #ffffff;
  border-radius: 2px 2px 2px 2px;
  display: flex; /* 启用 Flexbox */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  .text {
    height: 22px;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #007dff;
    line-height: 22px;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}

$main-color: #007dff;
$border-color: #d8d8d8;
.form-top {
  padding: 0 20px 20px 20px;
}
.top-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-height: 58px;
  max-height: 58px;
  box-sizing: border-box;
  align-items: center;
  position: relative;
}
.drawerheader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-height: 58px;
  max-height: 58px;
  box-sizing: border-box;
  align-items: center;
  position: relative;
}
.drawertitle {
  width: 202px;
  height: 24px;
  font-family:
    HarmonyOS Sans SC,
    HarmonyOS Sans SC;
  font-weight: 400;
  font-size: 18px;
  color: #131414;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-left: 10px;
}
.drawertitle ::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: $main-color;
  position: absolute;
  top: 25px;
  border-radius: 50%;
  left: 0px;
}
.title {
  width: 202px;
  height: 24px;
  font-family:
    HarmonyOS Sans SC,
    HarmonyOS Sans SC;
  font-weight: 400;
  font-size: 18px;
  color: #131414;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.title::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: $main-color;
  position: absolute;
  top: 25px;
  left: 20px;
  border-radius: 50%;
}
.content {
  overflow-y: auto;
  width: 100%;
  height: 100%;
  display: flex; /* 启用 Flexbox */
  justify-content: space-between; /* 水平排列项，均匀分配空间 */
  background: #ffffff;
  box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
  border-radius: 10px;
  margin: 10;
  .rowleft {
    overflow: scroll;
    border-top-left-radius: 10px; /* 左上角圆角 */
    width: 400px;
    height: 100%;
    border-right: 1px solid #c2d4e8;
  }
  .rowright {
    border-top-right-radius: 10px; /* 右上角圆角 */
    width: calc(100% - 400px);
    height: 100%;
    overflow: scroll;
  }

  .dowm {
    display: flex; /* 使用 flexbox */
    justify-content: flex-end; /* 水平右对齐 */
    align-items: center; /* 垂直居中对齐 */
    height: 46px;
    background: #ffffff;
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    border-radius: 0px 0px 0px 0px;
    position: absolute; /* 设置绝对定位 */
    bottom: 0; /* 固定在底部 */
    left: 0; /* 可选：从左侧开始 */
    right: 0; /* 可选：填满整个其父容器 */
    border-radius: 0; /* 圆角 */
    z-index: 10; /* 确保在其他元素之上 */
    .dowmchildren {
      margin: 10px; /* 添加一些外边距 */
    }
  }
}
.imgs {
  display: flex;
  flex-wrap: wrap;
  .standard_diagram_item {
    position: relative;
    img {
      width: 100px;
      height: 100px;
      margin: 0 10px 0 0;
    }
    .close_icon {
      position: absolute;
      right: -1px;
      top: -12px;
      z-index: 1;
      cursor: pointer;
      .close_icon_image {
        width: 12px;
        height: 12px;
      }
    }
    .close_icon :hover {
      color: #007dff;
    }
  }
}
.picture {
  position: absolute; /* 使用绝对定位 */
  top: 50%; /* 向下移动50% */
  left: 50%; /* 向右移动50% */
  transform: translate(-50%, -50%); /* 矫正自身偏移 */
  /* 这里是内容的样式，可以根据需要修改 */
}
.fatherpicture {
  width: 100%;
  height: calc(100% - 100px);
  position: relative;
}
</style>
